<template>
  <div>
    <baidu-map class="map" :center="center" :zoom="zoom"
               :scroll-wheel-zoom="true"
               :map-click="true"
               ak="lKTF6dTPp0bflD1mToHqAhmfIhGml6mn" v="3.0" type="API"
               :mapStyle="mapStyle"
    >

      <bm-marker v-for="(site, index) in sites" :key="index" :position="{lng: site.x, lat: site.y}" :icon="{url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: {width: 300, height: 157}}">
        <!-- 可以添加信息窗口等其他组件 -->

        <!-- 二维地图和卫星地图 -->
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type>
        <!--    <bm-panorama class="bm-panorama" ></bm-panorama>-->
        <!-- 比例尺 -->
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        <!--    <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>-->
        <!-- 缩略图 -->
        <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
        <!-- 全景控件 -->
            <bm-panorama anchor="BMAP_ANCHOR_TOP_LEFT"></bm-panorama>
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
        <!--    全景显示-->
            <bm-panorama anchor="BMAP_ANCHOR_TOP_LEFT"></bm-panorama>
        <!-- 获取现在的位置 -->
<!--        <bm-geolocation @ready="getLocation" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-geolocation>-->
            <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
<!--        <bm-marker :position="{lng: lng, lat: lat}" :dragging="true" @dragend="getLocation"></bm-marker>-->
        <!--    路线-->
<!--        <bm-polyline :path="path" :stroke-color="'blue'" :stroke-weight="5" :stroke-opacity="0.5"></bm-polyline>-->
        <!--    指南针-->
        <bm-compass anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-compass>
        <!--    导航-->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {
  BaiduMap,
  BmNavigation,
  BmMapType,
  BmScale,
  BmOverviewMap,
  BmCityList,
  BmPanorama,
  BmGeolocation,
  BmPolyline,
  BmMarker,


} from 'vue-baidu-map-3x';
import { getMapList } from '@/api/changebattery/map';
const center = ref({ lng: 116.404, lat: 39.915 }); // 默认地图中心点
const zoom = ref(12); // 默认缩放级别
const sites = ref([]); // 用于存储从数据库获取的站点信息



//地图样式
const mapStyle = ref({
  styleJson:[{
    "featureType": "land",
    "elementType": "geometry",
    "stylers": {
      "color": "#fffff9ff"
    }
  }, {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": {
      "color": "#69b0acff"
    }
  }, {
    "featureType": "highway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#b5caa0ff"
    }
  }, {
    "featureType": "highway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#94ad79ff"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#b5caa0ff"
    }
  }, {
    "featureType": "arterial",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#d4e2c6ff"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#d4e2c6ff"
    }
  }, {
    "featureType": "provincialway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#d4e2c6ff"
    }
  }, {
    "featureType": "provincialway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#b5caa0ff"
    }
  }, {
    "featureType": "tertiaryway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#ffffffff"
    }
  }, {
    "featureType": "tertiaryway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#b5caa0ff"
    }
  }, {
    "featureType": "fourlevelway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#ffffffff"
    }
  }, {
    "featureType": "fourlevelway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#b5caa0ff"
    }
  }, {
    "featureType": "subway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "railway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "highwaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "highwaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "nationalwaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "nationalwaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "provincialwaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "provincialwaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "tertiarywaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "tertiarywaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "subwaylabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "subwaylabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#94ad79ff"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#b5caa0ff"
    }
  }, {
    "featureType": "arterial",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#b5caa0ff"
    }
  }, {
    "featureType": "highway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "highway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "highway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "highway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "nationalway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "nationalway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "nationalway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "nationalway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "provincialway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "8,9",
      "level": "8"
    }
  }, {
    "featureType": "provincialway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "8,9",
      "level": "9"
    }
  }, {
    "featureType": "provincialway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "8,9",
      "level": "8"
    }
  }, {
    "featureType": "provincialway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "8,9",
      "level": "9"
    }
  }, {
    "featureType": "provincialway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "8,9",
      "level": "8"
    }
  }, {
    "featureType": "provincialway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "8,9",
      "level": "9"
    }
  }, {
    "featureType": "cityhighway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "cityhighway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "cityhighway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "cityhighway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "entertainment",
    "elementType": "geometry",
    "stylers": {
      "color": "#e4f0d7ff"
    }
  }, {
    "featureType": "manmade",
    "elementType": "geometry",
    "stylers": {
      "color": "#effcf0ff"
    }
  }, {
    "featureType": "education",
    "elementType": "geometry",
    "stylers": {
      "color": "#e3f7e4ff"
    }
  }, {
    "featureType": "building",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#a1cfa4ff"
    }
  }, {
    "featureType": "poilabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "poilabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "education",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#7a7a7aff"
    }
  }, {
    "featureType": "education",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffffff"
    }
  }, {
    "featureType": "education",
    "elementType": "labels.text",
    "stylers": {
      "fontsize": 26
    }
  }, {
    "featureType": "manmade",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#afafafff"
    }
  }, {
    "featureType": "manmade",
    "elementType": "labels.text",
    "stylers": {
      "fontsize": 26
    }
  }, {
    "featureType": "scenicspotslabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#376b6dff"
    }
  }, {
    "featureType": "scenicspots",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "scenicspotslabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "scenicspotslabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffffff",
      "weight": 4
    }
  }, {
    "featureType": "country",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#376b6dff"
    }
  }, {
    "featureType": "country",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffffff",
      "weight": 3
    }
  }, {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#ffffffff"
    }
  }, {
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "water",
    "elementType": "labels.text",
    "stylers": {
      "fontsize": 24
    }
  }]
})

// 模拟从数据库获取站点信息，实际项目中应替换为axios或其他方法
const fetchSitesFromDatabase = async () => {
  // 假设你有这样一个异步函数来获取数据
  // const response = await axios.get('/api/sites');
  // sites.value = response.data;
  // 为了示例，我们直接填充一些假数据 1维度 x 2经度 y
  // sites.value = [
  //   { name: '站点A', longitude: 116.388, latitude: 39.905 },
  //   { name: '站点B', longitude: 116.412, latitude: 39.920 },
  // ];

  // 调用接口获取站点信息
  const {data} = await getMapList();
  sites.value = data;
};

onMounted(() => {
  fetchSitesFromDatabase();
});
</script>

<style scoped>
.map {
  width: 100%;
  height: 700px;
}
</style>
